<template>
	<view class="deatil">
		<view class="card">
			<couponVue :query="query">
				<view class="btn" @click="routeGivePresent">
					赠送
				</view>
				<view class="btn"  @click="openWeChatCode">
					领取码
				</view>
				<view class="btn" @click="$ROUTELINK('record?coupon_id='+ initer.coupon_id)">
					记录
				</view>
			</couponVue>
		</view>
		<view class="center-box">
			<view class="row mb">
				<view class="lefttitle">
					使用类型
				</view>
				<view class="size">
					{{query.form == 'card' ?'会员卡':query.form == 'course' ?'课程':''}}
				</view>
			</view>
			<view class="row mb">
				<view class="lefttitle">
					满减门槛
				</view>
				<view class="size">
					{{query.threshold_str}}
				</view>
			</view>
			<view class="row mb">
				<view class="lefttitle">
					面额
				</view>
				<view class="size">
					{{query.face}}
				</view>
			</view>
			<view class="row mb">
				<view class="lefttitle">
					领取后有效天数
				</view>
				<view class="size">
					{{query.days}}
				</view>
			</view>
			<view class="row mb">
				<view class="lefttitle">
					每人限领数量
				</view>
				<view class="size">
					{{query.quantity}}张
				</view>
			</view>
			<view class="row mb">
				<view class="lefttitle">
					已领数量
				</view>
				<view class="size">
					{{query.claim}}张
				</view>
			</view>
			<view class="row ">
				<view class="lefttitle">
					总数量
				</view>
				<view class="size">
					{{query.quantity}}张
				</view>
			</view>
		</view>
		<view class="foot">
			<view class="footbtn" @click="addShow = true">
				增加数量
			</view>
		</view>
		<u-toast ref="uToast" />
		<add :addShow="addShow" :Num="initer.quantity" @add="addNum" @reduce="reduceNum" @close="close" @sure="sure"></add>
		<WechatCode :WechatCodeShow="WechatCodeShow" :code="wechatCode"  @save="save" @sure="weChatSure" :title="'优惠券领取码'" :content="'扫码领取优惠券'" :btn="'保存到相册'"></WechatCode>
	</view>
</template>

<script>
	import couponVue from './components/coupon.vue';
	import add from './components/AddQuantity.vue';
	import WechatCode from '@/components/WechatCode.vue'
	import{
		storeCouponInfo,
		storeCouponQuantity,
		storeCouponQrcode,
		storeMemberPoster
	} from '@/api/manager.js'
	export default {
		components: {
			couponVue,
			add,
			WechatCode
		},
		data() {
			return {
				addShow:false,
				query: {},
				WechatCodeShow:false,
				wechatCode: '',
				wechatCodeBig:'',
				initer:{
					coupon_id:'',
					quantity:0
				}
			}
		},
		onLoad(e) {
			this.getStoreCouponInfo(e)
			this.initer.coupon_id = e.coupon_id
		},
		methods: {
			getstoreMemberPoster(){
				storeMemberPoster({
					coupon_id:this.initer.coupon_id
				}).then(({data:res})=>{
					console.log('res', res);
					if(res.code == 1){
						this.wechatCodeBig = res.data.poster
					}
				})
			},
			getstoreCouponQuantity(){
				storeCouponQuantity(this.initer).then(({data:res})=>{
					console.log('res', res);
					if(res.code == 1){
						this.$refs.uToast.show({
							title: res.msg,
							type: 'success',
							icon: false,
						})
						this.getStoreCouponInfo({
							coupon_id:this.initer.coupon_id
						})
					}else{
						this.$refs.uToast.show({
							title: res.msg,
							type: 'error',
							icon: false,
						})
					}
				})
			},
			getStoreCouponInfo(e){
				storeCouponInfo(e).then(({data:res})=>{
					console.log('res', res);
					if(res.code == 1){
						this.query = res.data
					}
				})
			},
			addNum(data){
				this.initer.quantity ++
			},
			reduceNum(data){
				if(data <= 0){
					uni.showToast({
						title:'已达到最小添加量限制，无法继续减少',
						icon:'none'
					})
				}else{
					this.initer.quantity --
				}
			},
			close(){
				this.addShow = false
			},
			sure(){
				this.getstoreCouponQuantity()
				this.addShow = false
			},
			getstoreCouponQrcode(){
				storeCouponQrcode({
					coupon_id:this.initer.coupon_id
				}).then(({data:res})=>{
					console.log('res', res);
					if(res.code == 1){
						this.wechatCode = res.data.qrcode
					}
				})
			},
			openWeChatCode() {
				this.getstoreCouponQrcode()
				this.getstoreMemberPoster()
				this.WechatCodeShow = true
			},
			weChatSure() {
				this.WechatCodeShow = false
			},
			save(){
				this.$SAVERIMG(this.wechatCodeBig)
				this.WechatCodeShow = false
			},
			routeGivePresent(){
				uni.navigateTo({
					url:'givePresent'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #e9e9e9;
	}

	.deatil {
		display: flex;
		flex-direction: column;
		align-items: center;

		.btn {
			transform: rotateZ(360deg);
			width: 152rpx;
			height: 64rpx;
			border: 1rpx solid #73F0EA;
			border-radius: 16rpx;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			text-align: center;
			color: #73F0EA;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.card {
			margin: 24rpx 0 24rpx;
			width: 702rpx;
			height: 256rpx;
			background: #ffffff;
			border-radius: 16rpx;
		}

		.center-box {
			width: 702rpx;
			background: #ffffff;
			border-radius: 16rpx;
			padding: 40rpx;
			display: flex;
			flex-direction: column;

			.mb {
				margin-bottom: 48rpx;
			}

			.row {
				display: flex;
				flex-direction: row;
				align-items: center;
				width: 100%;

				.lefttitle {
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-Bold;
					font-weight: 700;
					text-align: left;
					color: #333333;
					flex: 1;
				}

				.size {
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-Medium;
					font-weight: 500;
					color: #000000;
				}
			}
		}

		.foot {
			position: fixed;
			bottom: 0;
			width: 750rpx;
			height: 160rpx;
			background: #ffffff;
			box-shadow: 0rpx 8rpx 28rpx 0rpx rgba(166, 179, 194, 0.30);
			padding-top: 10rpx;
			display: flex;
			justify-content: center;

			.footbtn {
				width: 710rpx;
				height: 88rpx;
				background: #73F0EA;
				border-radius: 16rpx;
				font-size: 34rpx;
				font-family: PingFang SC, PingFang SC-Bold;
				font-weight: 700;
				text-align: center;
				color: #ffffff;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>